<template>
	<tm-fullView>
		<tm-menubars title="树状结构" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<view class="ma-32  py-16" :class="[$tm.vx.state().tmVuetify.black?'grey-darken-5 bk':'white']">
			<tm-tree  :read="read" :list="list" :dirOpenIcon="dirIcon[0]" :dirCloseIcon="dirIcon[1]" ref="tree" @change="change" :defalutValue="vps"></tm-tree>
		</view>
		
		<view class="ma-32">
			<tm-button  @click="setDefaultValue">选择第二个条目</tm-button>
			
			<tm-button  @click="clear">取消选中全部</tm-button>
			<tm-button  @click="changeIcon">修改目录图标</tm-button>
			<tm-button  @click="getChangeKey('no')">获取未选中的</tm-button>
			<tm-button  @click="getChangeKey('yes')">获取选中的</tm-button>
			<tm-button  @click="openDir(2)">打开2所有目录</tm-button>
			<tm-button  @click="closeDir('2-1')">关闭2-1目录</tm-button>
			<tm-button  @click="addData">向子集1-1添加目录</tm-button>
			<tm-button  @click="addData1">向1添加平级数据</tm-button>
			<tm-button  @click="addData2">向根目录添加</tm-button>
			<tm-button  @click="$refs.tree.seletedAll()">选中全部</tm-button>
			<tm-button  @click="$refs.tree.setDefaultSelectedKey(['1-1',2,'2-2'])">选中1-1,2-2</tm-button>
			<tm-button  @click="read=!read">切换只读/多选状态</tm-button>
		</view>
		<view class="ma-32">
			<view>操作数据：</view>
			{{JSON.stringify(rulst)}}
		</view>
	</tm-fullView>
</template>

<script>
	import tmTree from '@/tm-vuetify/components/tm-tree/tm-tree.vue';
	import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
	import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
	export default {
		components: {
			tmTree,
			tmMenubars,
			tmFullView,
			tmButton,
		},
		data() {
			return {
				read:false,
				vps:[],//默认选中的id
				rulst:[],//结果
				dirIcon:['icon-sort-down','icon-caret-right'],
				list: [
					{
						title: '可以限级嵌套1',
						id: 1,
						children: [{ title: '可以限级嵌套1-1', id: '1-1' ,icon:'icon-bell' }, { title: '可以限级嵌套1-2', id: '1-2' ,icon:'icon-applicationgroup' }]
					},
					{
						title: '可以限级嵌套1',
						id: 99,
						children:[]
					},
					{
						title: '可以限级嵌套2',
						id: 2,
						children: [
							{
								title: '可以限级嵌套2-1',
								id: '2-1',
								children: [
									{
										title: '可以限级嵌套2-1-1',
										id: '2-1-1',
										children: [
											{
												title: '可以限级嵌套2-1-1-1',
												id: '2-1-1-1',
												children: [
													{
														title: '可以限级嵌套2-1-1-1-1',
														id: '2-1-1-1-1',
														children: [{ title: '可以限级嵌套2-1-1-1-1-1', id: '2-1-1-1-1-1' }, { title: '可以限级嵌套2-1-1-1-1-2', id: '2-1-1-1-1-2' }]
													}
												]
									 	},
											{ title: '可以限级嵌套2-1-1-2', id: '2-1-1-2' }
										]
									},
									{ title: '可以限级嵌套2-1-2', id: '2-1-2' }
								]
							},
							{ title: '可以限级嵌套2-2', id: '2-2' ,icon:'icon-gem' },
							{
								title: '被禁用2-3,被禁用',
								id: '2-3',
								
								children: [
									{
										title: '可以限级嵌套2-3-1',
										id: '2-3-1',
										children: [{ title: '可以限级嵌套2-3-1-1', id: '2-3-1-1', }, { title: '可以限级嵌套2-3-1-2',disabled:true, id: '2-3-1-2' }]
									}
								]
							},
						]
					}
				]
			};
		},
		methods: {
			setDefaultValue() {
				this.vps=[2]
				// 也可以这么设置
				//this.$refs.tree.setDefaultSelectedKey([2]);
				this.$refs.tree.setDefaultSelectedKey();
			},
			clear(){
				this.$refs.tree.clearChecked();
			},
			changeIcon(){
				this.dirIcon = ['icon-minus-circle','icon-plus-circle']
			},
			getChangeKey(type){
				if(type=='no'){
					this.rulst = this.$refs.tree.getCheckedArray('id','checked',false);
				}else{
					this.rulst = this.$refs.tree.getCheckedArray('id','checked',true);
				}
			},
			openDir(id){
				 this.$refs.tree.__openDir(id);
			},
			closeDir(id){
				 this.$refs.tree.__openDir(id,false);
			},
			change(list){
				this.rulst = list
			},
			addData(){
				
				let id=String(Math.floor(Math.random()*1000))
				this.$refs.tree.__addData(
					'1-1',
					[
						{
							title: '可以限级嵌套'+id,
							id: id,
							children: [{ title: '可以限级嵌套'+id+1, id: id+1 ,icon:'icon-bell' }, { title: '可以限级嵌套'+id+2, id: id+2 ,icon:'icon-applicationgroup' }]
						}
					]
				)
				
			},
			addData2(){
				
				let id=String(Math.floor(Math.random()*1000))
				this.$refs.tree.__addData(
					null,
					[
						{
							title: '可以限级嵌套'+id,
							id: id,
							children: [{ title: '可以限级嵌套'+id+1, id: id+1 ,icon:'icon-bell' }, { title: '可以限级嵌套'+id+2, id: id+2 ,icon:'icon-applicationgroup' }]
						}
					]
				)
				
			},
			addData1(){
				
				let id=String(Math.floor(Math.random()*1000))
				this.$refs.tree.__addData(
					1,
					[{ title: '可以限级嵌套'+id+1, id: id+1 ,icon:'icon-bell' }, { title: '可以限级嵌套'+id+2, id: id+2 ,icon:'icon-applicationgroup' }]
				)
				
			}
		},
	};
</script>

<style lang="scss">

</style>
